<template>
    <div class="tab-bar-item" @click="to">
        <slot name="tab-bar-icon"></slot>
        <div :style="isActiveColor">
          <slot name="tab-bar-text"></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    link: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data () {
    return {

    }
  },
  methods: {
    to () {
      this.$router.push(this.link)
    }
  },
  computed: {
    isActive () {
      return this.$route.path.includes(this.link)
    },
    isActiveColor () {
      return this.isActive ? {'color': this.activeColor} : {}
    }
  }
}
</script>

<style scoped>
    .tab-bar-item {
        flex: 1;
    }
    .tab-bar-item img {
        margin: 0 auto;
        margin-top: 10px;
        width: 30px;
        height: 30px;
    }
</style>
